<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>qq音乐官网</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<!-- 返回顶部 -->
	<div id="q"></div>
	<div id="w"><img src="img/shangjiantou.png" alt=""></div>
	<div id="e"><img src="img/fankui.png" alt=""></div>
	<div id="r"><img src="img/shibo.png" alt=""></div>



	<!-- 导航 -->
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
		<div class="container">
  <a class="navbar-brand" href="#"><img src="img/logo.png" alt=""></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link guan" href="#">音乐馆 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item kehu">
        <a class="nav-link qw" href="#">我的音乐</a>
      </li>
      <li class="nav-item dropdown kehu">
        <a class="nav-link dropdown-toggle qw" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          客户端
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#"><img src="img/a1.png" alt=""> &nbsp&nbsp&nbspHQ高品质 全员开启</a>
          <a class="dropdown-item" href="#"><img src="img/a2.png" alt=""> &nbsp&nbsp&nbsp独家音效 全面升级</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#"><img src="img/a3.png" alt=""> 
          &nbsp&nbsp&nbsp轻盈视觉 动态皮肤</a>
        </div>
      </li>
      <li class="nav-item kehu">
        <a class="nav-link qw" href="#">音乐号</a>
      </li>
      <li class="nav-item kehu">
        <a class="nav-link qw" href="#">vip</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="搜索音乐、MV、歌单" aria-label="Search">

      
      <img class="fangda" src="img/fangdajing.png" alt="">
      
        <a class="nav-link we" href="#">登录</a>
    
      <!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">开通绿钻豪华版</button> -->
      <button type="button" class="btn btn-success">开通绿钻豪华版</button>
      <!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">开通付费包</button> -->
      <button type="button" class="btn btn-light">开通付费包</button>
    </form>
  </div>
  
  </div>
</nav>
<!-- 第二个导航 -->
  <div class="nav2">
	<div class="container">
		<ul style="margin-bottom: 0;">
			<li><a class="avtar" href="#">首页</a></li>
			<li><a href="#">歌手</a></li>
			<li><a href="newdish.html">新碟</a></li>
			<li><a href="#">排行榜</a></li>
			<li><a href="classification.html">分类歌单</a></li>
			<li><a href="#">电台</a></li>
			<li><a href="#">MV</a></li>
			<li><a href="#">数字专辑</a></li>
			<li><a href="#">票务</a></li>
		</ul>
		</div>
  </div>
  <!-- 第二个导航 -->

  <!-- 歌单推荐 -->
  <div class="banner">
	<div class="container">
		<div class="row tuijian">
			<div class="col-12 col-md-12">
				<h3 class="w-100">歌单推荐</h3>
			</div>
		</div>
		<div class="row tuijian-2">
			<div class="col-md-9 tuijian-3 row">
				<div class="col-4 col-md-2 avter"><a href="#">为你推荐</a></div>
				<div class="col-4 col-md-2"><a href="#">
				网络歌曲</a></div>
				<div class="col-4 col-md-2"><a href="#">轻音乐</a></div>
				<div class="col-4 col-md-2"><a href="#">
				安静</a></div>
				<div class="col-4 col-md-2"><a href="#">官方歌单</a></div>
				<div class="col-4 col-md-2"><a href="#">
				情歌</a></div>
			</div>
		</div>
		<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
	  <ul class="carousel-indicators">
	    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
	    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
	    
	  </ul>
	  <div class="carousel-inner">
	    <div class="carousel-item active">
	      <ul>
					<li>
						<div class="ca1">
							<img class="qw1" src="img/img1.png" alt="">
						</div>
						<p><a href="#">虽然很累 也请你继续加油好么</a></p>
						<span>播放量：999.8万</span>
					</li>
					<li>
						<div class="ca1"><img src="img/img2.png" alt=""></div>
						<p><a href="#">甜蜜呓语 暖色调糖果</a></p>
						<span>播放量：6.7万</span>
					</li>
					<li>
						<div class="ca1"><img src="img/img3.png" alt=""></div>
						<p><a href="#">没有你的路口 连空气都寂寞</a></p>
						<span>播放量：399.6万</span>
					</li>
					<li>
						<div class="ca1"><img src="img/img4.png" alt=""></div>
						<p><a href="#">虐心网络曲：爱过你，却终究错过</a></p>
						<span>播放量：946.3万</span>
					</li>
					<li>
						<div class="ca1"><img src="img/img5.png" alt=""></div>
						<p><a href="#">Hip Hop：街头涂鸦演绎嘻哈技术</a></p>
						<span>播放量：2.7万</span>
					</li>
		      	</ul>
	    </div>
	    <div class="carousel-item">
	      <ul>
					<li>
						<div class="ca1"><img class="qw1" src="img/img1-1.png" alt=""></div>
						<p><a href="#">听说你也在找 一 首 主 打 歌</a></p>
						<span>播放量：1.9万</span>
					</li>
					<li>
						<div class="ca1"><img src="img/img1-2.png" alt=""></div>
						<p><a href="#">我的真朋友 | 同类型影视原声</a></p>
						<span>播放量：24.6万</span>
					</li>
					<li>
						<div class="ca1"><img src="img/img1-3.png" alt=""></div>
						<p><a href="#">成人的世界，没有感同身受</a></p>
						<span>播放量：999.9万</span>
					</li>
					<li>
						<div class="ca1"><img src="img/img1-4.png" alt=""></div>
						<p><a href="#">华语触电男嗓 · 撩动少女心事</a></p>
						<span>播放量：4.8万</span>
					</li>
					<li>
						<div class="ca1"><img src="img/img1-5.png" alt=""></div>
						<p><a href="#">安排上！一波土味视频BGM</a></p>
						<span>播放量：2.6万</span>
					</li>
		      	</ul>
	    </div>
	    
	  </div>
	  <!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
	    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
	    <span class="sr-only">Previous</span>
	  </a>
	  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
	    <span class="carousel-control-next-icon" aria-hidden="true"></span>
	    <span class="sr-only">Next</span>
	  </a> -->
	</div>
	</div>
  </div>
  <!-- 歌单推荐 -->

<!-- 新歌首发 -->
  <div class="banner1">
	<div class="container">
		<div class="row xinge">
			<div class="col-12 col-md-12">
				<h3 class="w-100">新歌首发</h3>
			</div>
		</div>
		<div class="xinge-2">
			<a class="aer" href="#"><img src="img/youjiantou.png" alt=""> 播放全部</a>
			<div class="col-md-9 xinge-3 row">
				<div class="col-4 col-md-2 avter"><a href="#">最新</a></div>
				<div class="col-4 col-md-2"><a href="#">
				内地</a></div>
				<div class="col-4 col-md-2"><a href="#">港台</a></div>
				<div class="col-4 col-md-2"><a href="#">
				欧美</a></div>
				<div class="col-4 col-md-2"><a href="#">韩国</a></div>
				<div class="col-4 col-md-2"><a href="#">
				日本</a></div>
			</div>
		</div>
		
		<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
		  <div class="carousel-inner">
		    <div class="carousel-item active">
		      <div class="row banner1-1">
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg1.png" alt=""></div>
					<div class="bimg2">
						<a href="#">四岁的海遛马</a>
						<p>阿云嘎</p>
						<span>03:46</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg2.png" alt=""></div>
					<div class="bimg2">
						<a href="#">Birds</a>
						<p>Imagine Dranons</p>
						<span>03:46</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg3.png" alt=""></div>
					<div class="bimg2">
						<a href="#">That's Lift</a>
						<p>Mac Miller </p>
						<span>03:22</span>
					</div>
				</div>
		      </div>
		      <div class="row banner1-1">
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg4.png" alt=""></div>
					<div class="bimg2">
						<a href="#">Favorite</a>
						<p>蔡程昱、高天鹤、鞠红川</p>
						<span>04:06</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg5.png" alt=""></div>
					<div class="bimg2">
						<a href="#">一个人记得</a>
						<p>尤长靖</p>
						<span>04:37</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg6.png" alt=""></div>
					<div class="bimg2">
						<a href="#">Make It Hot</a>
						<p>Major Lazer </p>
						<span>02:48</span>
					</div>
				</div>
		      </div>
		      <div class="row banner1-1">
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg7.png" alt=""></div>
					<div class="bimg2">
						<a href="#">Dancing With Nobody</a>
						<p>Austin Mahone</p>
						<span>03:16</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg8.png" alt=""></div>
					<div class="bimg2">
						<a href="#">Zimzalabim</a>
						<p>Red Velvet</p>
						<span>04:37</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg9.png" alt=""></div>
					<div class="bimg2">
						<a href="#">约束</a>
						<p>majiko(娘) </p>
						<span>04:45</span>
					</div>
				</div>
		      </div>
		    </div>
		     <div class="carousel-item">
		      <div class="row banner1-1">
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg10.png" alt=""></div>
					<div class="bimg2">
						<a href="#">父与子</a>
						<p>Mac马俊 / 艾热</p>
						<span>04:01</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg11.png" alt=""></div>
					<div class="bimg2">
						<a href="#">悲伤逆流成河</a>
						<p>许靖韵</p>
						<span>04:04</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg12.png" alt=""></div>
					<div class="bimg2">
						<a href="#">一双翅膀</a>
						<p>鞠敬伟 </p>
						<span>03:24</span>
					</div>
				</div>
		      </div>
		      <div class="row banner1-1">
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg13.png" alt=""></div>
					<div class="bimg2">
						<a href="#">我们相亲相爱</a>
						<p>成龙 / 容祖儿</p>
						<span>04:33</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg14.png" alt=""></div>
					<div class="bimg2">
						<a href="#">共同家园</a>
						<p>张敬轩 / 宋雪莱 / 常安</p>
						<span>03:18</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg15.png" alt=""></div>
					<div class="bimg2">
						<a href="#">Stronger</a>
						<p>TheFatRat / Slaydit</p>
						<span>05:22</span>
					</div>
				</div>
		      </div>
		      <div class="row banner1-1">
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg16.png" alt=""></div>
					<div class="bimg2">
						<a href="#">Snpping</a>
						<p>金请夏</p>
						<span>03:33</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg17.png" alt=""></div>
					<div class="bimg2">
						<a href="#">Hello</a>
						<p>黄玲</p>
						<span>03:48</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg18.png" alt=""></div>
					<div class="bimg2">
						<a href="#">懒得</a>
						<p>苏醒</p>
						<span>06:28</span>
					</div>
				</div>
		      </div>
		    </div>
		    <div class="carousel-item">
		      <div class="row banner1-1">
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg19.png" alt=""></div>
					<div class="bimg2">
						<a href="#">最想见到你</a>
						<p>白安</p>
						<span>03:40</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg20.png" alt=""></div>
					<div class="bimg2">
						<a href="#">Let You Go</a>
						<p>Itro</p>
						<span>03:25</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg21.png" alt=""></div>
					<div class="bimg2">
						<a href="#">One Thing Right</a>
						<p>Marshmello </p>
						<span>03:10</span>
					</div>
				</div>
		      </div>
		      <div class="row banner1-1">
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg22.png" alt=""></div>
					<div class="bimg2">
						<a href="#">Expensive</a>
						<p>Rence 、Noah Cyrus</p>
						<span>03:07</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg23.png" alt=""></div>
					<div class="bimg2">
						<a href="#">盛夏</a>
						<p>毛不易 、 龙丹妮</p>
						<span>03:05</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg24.png" alt=""></div>
					<div class="bimg2">
						<a href="#">奔</a>
						<p>孙燕姿 </p>
						<span>05:22</span>
					</div>
				</div>
		      </div>
		      <div class="row banner1-1">
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg25.png" alt=""></div>
					<div class="bimg2">
						<a href="#">犟</a>
						<p>火箭少女101孟美吉</p>
						<span>03:24</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg26.png" alt=""></div>
					<div class="bimg2">
						<a href="#">Heat</a>
						<p>Chris Brown / Gunna</p>
						<span>03:52</span>
					</div>
				</div>
				<div class="col-md">
					<div class="bimg1"><img src="img/bimg27.png" alt=""></div>
					<div class="bimg2">
						<a href="#">Runaway</a>
						<p>Sebastian Yatra / Daddy </p>
						<span>03:24</span>
					</div>
				</div>
		      </div>
		    </div> 
		  </div>
		  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
		    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
		    <span class="sr-only">Previous</span>
		  </a>
		  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
		    <span class="carousel-control-next-icon" aria-hidden="true"></span>
		    <span class="sr-only">Next</span>
		  </a>
		</div>
	</div>
  </div>
  <!-- 新歌首发 -->

<!-- 精彩推荐 -->
  <div class="banner2">
	<div class="container">
		<div class="row jingcai">
			<div class="col-12 col-md-12">
				<h3 class="w-100">精彩推荐</h3>
			</div>
		</div>
		<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
		  <div class="carousel-inner">
		    <div class="carousel-item active">
		      <img class="acac" src="img/b2img1.png" class="d-block w-50" alt="">
		      <img class="axax" src="img/b2img2.png"  class="d-block w-50" alt="">
		    </div>
		    <div class="carousel-item">
		      <img class="acac" src="img/b2img3.png" class="d-block w-50" alt="">
		      <img class="axax" src="img/b2img4.png"  class="d-block w-50" alt="">
		    </div>
		    <div class="carousel-item">
		      <img class="acac" src="img/b2img5.png" class="d-block w-50" alt="">
		      <img class="axax" src="img/b2img6.png"  class="d-block w-50" alt="">
		    </div>
		  </div>
		  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
		    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
		    <span class="sr-only">Previous</span>
		  </a>
		  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
		    <span class="carousel-control-next-icon" aria-hidden="true"></span>
		    <span class="sr-only">Next</span>
		  </a>
		</div>
	</div>
  </div>
<!-- 精彩推荐 -->

<!-- 新碟首发 -->
  <div class="banner3">
	<div class="container">
		<div class="row xindie">
			<div class="col-12 col-md-12">
				<h3 class="w-100">新碟首发</h3>
			</div>
		</div>
		<div class="row xindie-2">
			<div class="col-md-9 xindie-3 row">
				<div class="col-4 col-md-2 avter"><a href="#">内地</a></div>
				<div class="col-4 col-md-2"><a href="#">
				港台</a></div>
				<div class="col-4 col-md-2"><a href="#">欧美</a></div>
				<div class="col-4 col-md-2"><a href="#">
				韩国</a></div>
				<div class="col-4 col-md-2"><a href="#">日本</a></div>
				<div class="col-4 col-md-2"><a href="#">
				其他</a></div>
			</div>
		</div>
		<div class="row neidi">
			<div class="col-md">
				<div class="neidi-1"><img src="img/b3img1.png" alt=""></div>
				<p><a href="#">Mr dying alone</a></p>
				<span>热依娜</span>
			</div>
			<div class="col-md">
				<div class="neidi-1"><img src="img/b3img2.png" alt=""></div>
				<p><a href="#">花一样的你</a></p>
				<span>架一航</span>
			</div>
			<div class="col-md">
				<div class="neidi-1"><img src="img/b3img3.png" alt=""></div>
				<p><a href="#">共度来生</a></p>
				<span>陈大创</span>
			</div>
			<div class="col-md">
				<div class="neidi-1"><img src="img/b3img4.png" alt=""></div>
				<p><a href="#">大象之歌</a></p>
				<span>周笔畅</span>
			</div>
			<div class="col-md">
				<div class="neidi-1"><img src="img/b3img5.png" alt=""></div>
				<p><a href="#">看不见</a></p>
				<span>阿细</span>
			</div>
		</div>
		<div class="row neidi-2">
			<div class="col-md">
				<div class="neidi-1"><img src="img/b3img6.png" alt=""></div>
				<p><a href="#">茶花游戏</a></p>
				<span>墨菲定律</span>
			</div>
			<div class="col-md">
				<div class="neidi-1"><img src="img/b3img7.png" alt=""></div>
				<p><a href="#">可爱的可恨的可悲了可惜了</a></p>
				<span>鱼圈</span>
			</div>
			<div class="col-md">
				<div class="neidi-1"><img src="img/b3img8.png" alt=""></div>
				<p><a href="#">深夜的歌</a></p>
				<span>何建清</span>
			</div>
			<div class="col-md">
				<div class="neidi-1"><img src="img/b3img9.png" alt=""></div>
				<p><a href="#">伟大荣誉</a></p>
				<span>刘晓超</span>
			</div>
			<div class="col-md">
				<div class="neidi-1"><img src="img/b3img10.png" alt=""></div>
				<p><a href="#">Alwayz Wavy And Young</a></p>
				<span>柘灰</span>
			</div>
		</div>
	</div>
  </div>
<!-- 新碟首发 -->

<!-- 排行榜 -->
  <div class="banner4">
	<div class="container">
		<div class="row paihang">
			<div class="col-12 col-md-12">
				<h3 class="w-100">排行榜</h3>
			</div>
		</div>
		<div class="row paihang-1">
			<div class="col paihang-1-1">
				<h5>巅峰榜</h5>
				<h2>流行指数</h2>
				<a href="#" class="a1"><img src="img/hengxian.png" alt=""></a>
				<a href="#" class="a2"><img src="img/xiaobofang.png" alt=""></a>
				<ol>
					<li><a href="#">You Need To Calm D...... Taylor Swift</a></li>
					<li><a href="#">多想在平庸的生活拥抱你... 隔壁老樊</a></li>
					<li><a href="#">짐살라빔 (Zimzalabim).Red Velvet (레드벨벳)</a></li>
				</ol>
			</div>
			<div class="col paihang-1-2">
				<h5>巅峰榜</h5>
				<h2>热歌</h2>
				<a href="#" class="a1"><img src="img/hengxian.png" alt=""></a>
				<a href="#" class="a2"><img src="img/xiaobofang.png" alt=""></a>
				<ol>
					<li><a href="#">来自天堂的魔鬼G.E.M...邓紫棋</a></li>
					<li><a href="#">你的酒馆对我打了烊  陈雪凝</a></li>
					<li><a href="#">You Need To Calm D..Taylor Swift</a></li>
				</ol>
			</div>
			<div class="col paihang-1-3">
				<h5>巅峰榜</h5>
				<h2>新歌</h2>
				<a href="#" class="a1"><img src="img/hengxian.png" alt=""></a>
				<a href="#" class="a2"><img src="img/xiaobofang.png" alt=""></a>
				<ol>
					<li><a href="#">耿&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 汪苏泷</a></li>
					<li><a href="#">You Need To Calm D..Taylor Swift</a></li>
					<li><a href="#">一个人记得&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 尤长靖</a></li>
				</ol>
			</div>
			<div class="col paihang-1-4">
				<h5>巅峰榜</h5>
				<h2>欧美</h2>
				<a href="#" class="a1"><img src="img/hengxian.png" alt=""></a>
				<a href="#" class="a2"><img src="img/xiaobofang.png" alt=""></a>
				<ol>
					<li><a href="#">You Need To Calm Down Taylor Swift</a></li>
					<li><a href="#">Call You MineThe Chainsmokers</a></li>
					<li><a href="#">Never Really Over Katy Perry</a></li>
				</ol>
			</div>
			<div class="col paihang-1-5">
				<h5>巅峰榜</h5>
				<h2>韩国</h2>
				<a href="#" class="a1"><img src="img/hengxian.png" alt=""></a>
				<a href="#" class="a2"><img src="img/xiaobofang.png" alt=""></a>
				<ol>
					<li><a href="#">BIRTHDAY  전소미 (全昭弥)</a></li>
					<li><a href="#">짐살라빔 (Zimzalabim) Red Velvet (레드벨벳)</a></li>
					<li><a href="#">NO ONE (Feat. B.I of iKON) (누구 없소)</a></li>
				</ol>
			</div>
		</div>
	</div>
  </div>
  <!-- 排行榜 -->


  <!-- MV -->
  <div class="banner5">
	<div class="container">
		<div class="row mv">
			<div class="col-12 col-md-12">
				<h3 class="w-100">MV</h3>
			</div>
		</div>
		<div class="row mv-2">
			<div class="col-md-9 mv-3 row">
				<div class="col-4 col-md-2 avter"><a href="#">精选</a></div>
				<div class="col-4 col-md-2"><a href="#">
				内地</a></div>
				<div class="col-4 col-md-2"><a href="#">韩国</a></div>
				<div class="col-4 col-md-2"><a href="#">
				港台</a></div>
				<div class="col-4 col-md-2"><a href="#">欧美</a></div>
				<div class="col-4 col-md-2"><a href="#">
				日本</a></div>
			</div>
		</div>
		<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
		<div class="swiper-1">
			<div class="row mv-4">
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg1.png" alt=""></div>
					<p class="mvp1"><a href="#">Red Velet《Zimzalabim》 MV</a></p>
					<p class="mvp2"><a href="#">Red Velvet</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 20.3万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg2.png" alt=""></div>
					<p class="mvp1"><a href="#">孤独与诗</a></p>
					<p class="mvp2"><a href="#">鞠敬伟</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 37.2万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg3.png" alt=""></div>
					<p class="mvp1"><a href="#">吉娃娃</a></p>
					<p class="mvp2"><a href="#">MC HotDog</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 2.4万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg4.png" alt=""></div>
					<p class="mvp1"><a href="#">如爱所愿</a></p>
					<p class="mvp2"><a href="#">梁静茹</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 32.5万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg5.png" alt=""></div>
					<p class="mvp1"><a href="#">All the Time</a></p>
					<p class="mvp2"><a href="#">Stray kids</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 1.2万</a></p>
				</div>
		</div>
		<div class="row mv-4">
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg6.png" alt=""></div>
					<p class="mvp1"><a href="#">第一首情歌《最好的我们》</a></p>
					<p class="mvp2"><a href="#">汪苏泷</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 15.4万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg7.png" alt=""></div>
					<p class="mvp1"><a href="#">Never There</a></p>
					<p class="mvp2"><a href="#">Sum41</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 59010</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg8.png" alt=""></div>
					<p class="mvp1"><a href="#">Cross Me</a></p>
					<p class="mvp2"><a href="#">Ed Sheeran</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 69.7万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg9.png" alt=""></div>
					<p class="mvp1"><a href="#">误区《最佳利益》电视剧片尾曲</a></p>
					<p class="mvp2"><a href="#">叮当</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 18万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg10.png" alt=""></div>
					<p class="mvp1"><a href="#">金草莓</a></p>
					<p class="mvp2"><a href="#">陈柏宇</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 2.4万</a></p>
				</div>
		 </div>
		</div>

      </div>
      <div class="swiper-slide">
		<div class="swiper-2">
			<div class="row mv-4">
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg11.png" alt=""></div>
					<p class="mvp1"><a href="#">Pista de Pouso</a></p>
					<p class="mvp2"><a href="#">Sinco</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 384</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg12.png" alt=""></div>
					<p class="mvp1"><a href="#">Take It</a></p>
					<p class="mvp2"><a href="#">Dom Dolla</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 426万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg13.png" alt=""></div>
					<p class="mvp1"><a href="#">1001 Noches</a></p>
					<p class="mvp2"><a href="#">Fonseca</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 226</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg14.png" alt=""></div>
					<p class="mvp1"><a href="#">Persian</a></p>
					<p class="mvp2"><a href="#">ziezie</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 197</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg15.png" alt=""></div>
					<p class="mvp1"><a href="#">Una volta ancora</a></p>
					<p class="mvp2"><a href="#">Fred De Palma</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 336</a></p>
				</div>
		      </div>
		      <div class="row mv-4">
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg16.png" alt=""></div>
					<p class="mvp1"><a href="#">Cintura Con Cintura</a></p>
					<p class="mvp2"><a href="#">Adexe & Nau</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 367</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg17.png" alt=""></div>
					<p class="mvp1"><a href="#">(FIFA品类&林俊杰主题曲MV)</a></p>
					<p class="mvp2"><a href="#">林俊杰</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 249.3万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg18.png" alt=""></div>
					<p class="mvp1"><a href="#">孤独与诗</a></p>
					<p class="mvp2"><a href="#">鞠敬伟</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 102.4万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg19.png" alt=""></div>
					<p class="mvp1"><a href="#">《少年的你》电影主题曲</a></p>
					<p class="mvp2"><a href="#">林俊杰</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 455.6万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg20.png" alt=""></div>
					<p class="mvp1"><a href="#">Cintura Con Cintura</a></p>
					<p class="mvp2"><a href="#">Adexe & Nau</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 539</a></p>
				</div>
		      </div>
		</div>
      </div>
      <div class="swiper-slide">
		<div class="swiper">
			<div class="row mv-4">
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg11.png" alt=""></div>
					<p class="mvp1"><a href="#">Ritual</a></p>
					<p class="mvp2"><a href="#">Tiësto</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 22.4万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg3.png" alt=""></div>
					<p class="mvp1"><a href="#">いつも何度でも</a></p>
					<p class="mvp2"><a href="#">木村弓</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 90.3万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg5.png" alt=""></div>
					<p class="mvp1"><a href="#">最完美的分手</a></p>
					<p class="mvp2"><a href="#">李克勤</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 50.5万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg5.png" alt=""></div>
					<p class="mvp1"><a href="#">Call You Mine</a></p>
					<p class="mvp2"><a href="#">The Chainsmokers</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 281.1万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg6.png" alt=""></div>
					<p class="mvp1"><a href="#">Don't Save Me</a></p>
					<p class="mvp2"><a href="#">Marshmello</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 40.3万</a></p>
				</div>
		      </div>
		      <div class="row mv-4">
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg13.png" alt=""></div>
					<p class="mvp1"><a href="#">Runaway</a></p>
					<p class="mvp2"><a href="#">Sebastian Yatra</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 17.6万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg16.png" alt=""></div>
					<p class="mvp1"><a href="#">《跳舞吧！大象》电影主题曲</a></p>
					<p class="mvp2"><a href="#">周笔畅</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 139.1万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg18.png" alt=""></div>
					<p class="mvp1"><a href="#">Dancing With Nobody</a></p>
					<p class="mvp2"><a href="#">Austin Mahone</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 21.8万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg18.png" alt=""></div>
					<p class="mvp1"><a href="#">《海兽之子》电影主题曲</a></p>
					<p class="mvp2"><a href="#">米津玄師</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 153.4万</a></p>
				</div>
				<div class="col mv-4-1">
					<div class="mv-1"><img src="img/mvimg19.png" alt=""></div>
					<p class="mvp1"><a href="#">《我的真朋友》电视剧插曲</a></p>
					<p class="mvp2"><a href="#">张碧晨</a></p>
					<p class="mvp3"><a href="#"><img src="img/shexiang.png" alt=""> 130.9万</a></p>
				</div>
		      </div>
		</div>
      </div>
      
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
	</div>
  </div>
  <!-- MV -->

  <!-- footer部分开始 -->
  <footer>
	<div class="container">
		<div class="footer-top">
			<div class="row">
				<div class="col-12 col-md-4 footer1">
					<h4>下载QQ音乐客户端</h4>
					<ul class="footer-top-1">
						<li>
							<img class="footer-1" src="img/footer1.png" alt="">
							<p><a href="#">PC版</a></p>
						</li>
						<li>
							<img class="footer-2" src="img/footer2.png" alt="">
							<p><a href="#">Mac版</a></p>
						</li>
						<li>
							<img class="footer-3" src="img/footer3.png" alt="">
							<p><a href="#">Android版</a></p>
						</li>
						<li>
							<img class="footer-4" src="img/footer4.png" alt="">
							<p><a href="#">iphone版</a></p>
						</li>
					</ul>
					<h4>开放平台</h4>
					<ul class="footer-top-2">
						<li><a href="#">腾讯音乐人平台</a></li>
						<li><a href="#">音乐号认证</a></li>
						<li><a href="#">机构入驻</a></li>
					</ul>
				</div>
				<div class="col-12 col-md-4 footer2">
					<h4>特色产品</h4>
					<ul class="footer-top-3">
						<li>
							<img class="footer-5" src="img/footer5.png" alt="">
							<p><a href="#">全民k歌</a></p>
						</li>
						<li>
							<img class="footer-6" src="img/footer6.png" alt="">
							<p><a href="#">Super Sound</a></p>
						</li>
						<li>
							<img class="footer-7" src="img/footer7.png" alt="">
							<p><a href="#">Qplay</a></p>
						</li>
					</ul>
					<ul class="footer-top-4">
						<li><a href="#">车载互联</a></li>
						<li><a href="#">QQ演出</a></li>
					</ul>
					<h4>TME集团官网</h4>
					<p class="mvp4"><a href="#">腾讯音乐</a></p>
				</div>
				<div class="col-12 col-md-4 footer3">
					<h4>合作链接</h4>
					<ul>
						<li><a href="#">CJ ENM</a></li>
						<li><a href="#">最新版QQ</a></li>
						<li><a href="#">QQ浏览器</a></li>
						<li><a href="#">企鹅FM</a></li>
					</ul>
					<ul>
						<li><a href="#">腾讯视频</a></li>
						<li><a href="#">腾讯社交广告</a></li>
						<li><a href="#">腾讯微云</a></li>
						<li><a href="#">智能电视网</a></li>
					</ul>
					<ul>
						<li><a href="#">手机QQ空间</a></li>
						<li><a href="#">电脑管家</a></li>
						<li><a href="#">腾讯云</a></li>
						<li><a href="#">当贝市场</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="footer-bottom">
			<p class="fop1"><a href="#">关于腾讯</a> | <a href="#">About Tencent</a> | <a href="#">服务条款</a> | <a href="#">用户服务协议</a> | <a href="#">隐私政策</a> | <a href="#">权利声明</a> | <a href="#">广告服务</a> | <a href="#">腾讯招聘</a> | <a href="#">客服中心</a> | <a href="#">网站导航</a></p>
			<p class="fop2">Copyright © 1998 - 2019 Tencent. <a href="#">All Rights Reserved.</a></p>
			<p class="fop3">腾讯公司 <a href="#">版权所有</a> <a href="#">腾讯网络文化经营许可证</a></p>
		</div>
	</div>
  </footer>

  <!-- footer部分结束 -->

	




	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="js/vue.js"></script>
    <script src="json/news.json"></script>
    <script src="js/script.js"></script>
</body>
</html>

